<template>
  <div class="line" ref="line"></div>
</template>

<script setup lang="ts">
//第一步:引包
//第二步:准备一个具有一定高度的容器
//第三步:初始化echarts类的实例?在哪里初始化
//引入echarts组件:统一引入
//echarts:不是默认暴露
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
//获取容器节点
let line = ref();
onMounted(() => {
  //初始化echarts实例
  let mycharts = echarts.init(line.value);
  //设置配置项
  let option = {
    xAxis: {
      //折线图，在x轴两侧不留空白
      boundaryGap: false,
      //折线图在x轴均匀分布
      type: "category",
      //隐藏x轴
      show: false,
      //坐标轴指示器配置项。
      axisPointer: {
        show: true,
        //指示器类型
        type: "line",
      },
    },
    yAxis: {
      show: false,
    },
    series: {
      type: "line",
      data: props.orderTrend,
      //平滑曲线
      smooth: true,
      //拐点类型
      symbol: "none",
      //填充区域颜色
      areaStyle: {
        //渐变颜色
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "yellowgreen", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "skyblue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    //背景板组件设置
    grid: {
      show: true,
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      //容器的颜色
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "skyblue", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "pink", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
    //提示信息组件
    tooltip: {
      show: true,
      //代表提示框在图标区域当中不能出去
      confine: true,
      //提示框背景颜色
      backgroundColor: "rgb(0,0,0,.5)",
      borderColor: "yellowgreen",
      //提示框文字颜色
      textStyle: {
        color: "yellowgreen",
      },
    },
  };
  mycharts.setOption(option);
  window.addEventListener("resize", () => {
    mycharts.resize();
  });
});

let props = defineProps(["orderTrend"]);
</script>

<style scoped>
.line {
  width: 100%;
  height: 100%;
}
</style>